<template>
	<view class="h-full flex flex-col items-center justify-between px-30">
		<view class="w-full">
			<NavBarVue title="" :leftIcon="false"></NavBarVue>
			<view class="mb-30 p-20 bg-white w-full rounded-lg flex shadow-lg">
				<view class="border-2 border-[#BADEFF] border-solid rounded-lg overflow-hidden">
					<ImageBoxVue :src="info?.headimg" width="180rpx" height="180rpx"></ImageBoxVue>
				</view>
				<view class="ml-20 flex flex-col justify-around ">
					<view class="flex">
						<text class="text-md">{{info?.name||info?.nickname}}</text>
						<view v-if="info?.member"
							class="bg-gradient-to-r z-10 from-[#D5CEFF] to-[#65B5FF] ml-10 text-center rounded-full py-2 px-4">
							<text class="text-white text-[11rpx] whitespace-nowrap">{{jobQuery(info)}}</text>
						</view>
					</view>
					<view class="flex" v-if="info?.member">
						<view class="flex justify-center items-center" v-if="info.member?.gender==0">
							<view class="rounded-full w-48 h-36 bg-[#FD6CFF] flex items-center justify-center">
								<ImageBoxVue src="/static/icons/w_man.png" width="24rpx" height="24rpx">
								</ImageBoxVue>
							</view>
						</view>
						<view class="flex justify-center items-center" v-if="info.member?.gender==1">
							<view class="rounded-full w-48 h-36 bg-[#329EFF] flex items-center justify-center">
								<ImageBoxVue src="/static/icons/man.png" width="24rpx" height="24rpx"></ImageBoxVue>
							</view>
						</view>
					</view>
					<view class="flex" v-else>
						<view
							class="bg-gradient-to-r px-20 z-10 from-[#FF9562] to-[#FFBB55]  text-center rounded-full py-2">
							<text class="text-white font-bold text-[11rpx] whitespace-nowrap">{{'LV.3'}}</text>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="flex flex-col items-center">
				<view class="my-50 flex items-center bg-[#BBE4FF] py-10 px-20 rounded-full">
					<text>连线模式</text>
					<view class="rounded-full h-full flex justify-center py-10 px-20 ml-10 items-center bg-white">
						<ImageBoxVue :src="phoneType=='red'?'/static/icons/red.png':'/static/icons/blue.png'"
							width="28rpx" height="29rpx"></ImageBoxVue>
						<text>{{phoneType=='red'?'红':'蓝'}}钻模式</text>
					</view>
				</view>
				<view class="p-20 pt-50 rounded" style="width: 500rpx;">
					<text v-if="type=='send'" class="text-md text-[#329EFF]">正在准备接听您的语音连线，我们已短信通知主播，请您耐心等待...</text>
					<text v-else class="text-md text-[#329EFF]">正在邀请您语音连线。</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="flex w-full justify-center" style="padding-bottom: 60rpx;" v-if="type=='send'">
			<image src="/static/live/refuse.png" style="width:120rpx;height:120rpx" @click="sendClose"></image>

		</view>
		<view class="flex w-full justify-around" style="padding-bottom: 60rpx;" v-else>
			<image src="/static/live/refuse.png" style="width:120rpx;height:120rpx" @click="receiveClose"></image>
			<image src="/static/live/answer.png" style="width:120rpx;height:120rpx" @click="receiveSure"></image>

		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onBackPress,
		onLoad,
		onHide,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";
	import {
		jobQuery
	} from '@/config/publicFun';
	import userApi from "../../apis/apiList/userApi";
	let audioCtx = uni.createInnerAudioContext();
	const info = ref()
	const type = ref("")
	let fromAccount = ""
	const user = uni.getStorageSync('user')
	// 播放本地音频
	const playAudio = (val) => {
		audioCtx.src = '/static/msg.mp3'; // 在线音频地址
		audioCtx.loop = true
		console.log(audioCtx.src);
		audioCtx.play();
	}
	const phoneType = ref('')
	onLoad((option) => {
		console.log(option);
		// info.value = JSON.parse(option.info)
		// console.log(info.value);
		fromAccount = option.fromAccount
		type.value = option.type
		phoneType.value = option.phoneType
		if (option.type == 'send') {
			console.log(user);
			// 发送方
			const payload = {
				data: 'phone',
				description: `${user.id}`,
				extension: JSON.stringify({
					nickname: user.nickname,
					headimg: user.headimg
				})
			}
			console.log(payload);
			uni.$emit('send-msg', fromAccount, payload)
			getAnchorInfo()
		} else {
			// 接收方
			getInfo()
		}

	})
	const getInfo = () => {
		userApi.queryMemberInfo({
			id: fromAccount
		}).then(res => {
			info.value = res.data
			console.log(info.value);
		})
	}
	const getAnchorInfo = () => {
		userApi.queryAnchorInfoByMemberId({
			"member.id": fromAccount
		}).then(res => {
			info.value = res.data
			console.log(info.value);
		})
	}
	// 发送方取消
	const sendClose = () => {
		uni.$emit('send-msg', fromAccount, {
			description: `${user.id}`,
			extension: JSON.stringify({
				nickname: user.nickname,
				headimg: user.headimg
			}),
			data: 'unPhone'
		})
		back()
	}
	//接收方取消 
	const receiveClose = () => {
		uni.$emit('send-msg', fromAccount, {
			"data": "unPhone",
			"description": "",
			"extension": ""
		})
		back()
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	//接收方确认 
	const receiveSure = () => {
		uni.$emit('send-msg', fromAccount, {
			"data": "privateChat",
			"description": `${ uni.getStorageSync('user').id}`,
			"extension": ""
		})
		privateChat(uni.getStorageSync('user').id, fromAccount)
	}
	const privateChat = (anchorId, id) => {
		stopAudio()
		uni.redirectTo({
			url: `/pages/msg/privateChat?anchorId=${anchorId}&id=${id}`
		})
	}
	onShow(() => {
		playAudio()
	})
	onHide(() => {
		stopAudio()
	})
	onUnload(() => {
		stopAudio()
	})
	const stopAudio = () => {
		if (audioCtx) {
			audioCtx.stop()
			audioCtx.destroy()
		}
	}
	// 监听返回
	onBackPress((options) => {
		stopAudio()
	})
</script>

<style>

</style>